<template>
  <div id="Scatter" style="width: 630px; height: 280px;"></div>
</template>
<script setup>
import { onMounted } from "vue";
import * as echarts from 'echarts';
import adminApi from "../../apis/admin";
const DrawEcharts = (data) => {
  var chartDom = document.getElementById('Scatter');
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    title: {
      text: '用户生日月份分布数',
      left: 'center', // 标题水平居中
      top: '10px' // 标题距离图表顶部的距离
    },
    xAxis: {
      type: 'value', // 设置x轴类型为数值型
      axisLabel: {
        formatter: function(value) {
          var monthLabels = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
          var index = Math.round(value) - 1;
          if (index >= 0 && index < monthLabels.length) {
            return monthLabels[index];
          } else {
            return '';
          }
        }
      }
    },
    yAxis: {},
    series: [
      {
        symbolSize: 20,
        data: data,
        type: 'scatter',
        label: {
          show: true,
          position: 'top',
          formatter: function(params) {
            return params.value[1]; // 只显示count数据在标签中
          },
          color: '#000000' // 标签文字颜色
        }
      }
    ]
  };

  option && myChart.setOption(option);

}
const GetAllBirthdayData = async () => {
  try {
    const res =await adminApi.getBirthdayData();
    var ArrayList = new Array();
    for(var i=0;i<=11;i++){
      var array = new Array();
      array.push(res[i][0].month);
      array.push(res[i][0].count);
      ArrayList.push(array);
      console.log(array);
    }
    console.log(ArrayList);
    DrawEcharts(ArrayList);
  } catch (error) {
    console.log(error);
  }
}
onMounted(async () => {
  await GetAllBirthdayData();
});
</script>

<style scoped>
</style>
